import React, { Component } from 'react';
import '../App.less';
import '../css/ShoppingMall.less'
import {observer} from "mobx-react";
import  Mobx from  '../mobx'
import  Lunbo from  './Lunbo'
import axios from  'axios'
import Dibu from './dibu'
@observer class ShoppingMall extends Component {
    constructor(props) {
        super(props)
        this.state={
            choose:3,
            size:0,
            total:1,
            Array:[],
            chooseType:'salesDesc'
        }
        this.intervaling=''
    }
    componentDidMount(){
        Mobx.history= this.props.history
        axios.get('http://www.niuduxiu.com/mobile/product/list.jhtml?pageNumber=1&pageSize=10&orderType=salesDesc&productCategoryId=&search=')
            .then((item)=>{
                this.setState({
                    size:item.data.returnValue.pageNumber,
                    total:item.data.returnValue.tatalPage,
                    Array:item.data.returnValue.products
                },()=>{
                    this.interval();
                })
            })
    }
    interval(){
            if(this.state.total<=this.state.size){
                return false;
            }else{
                this.intervaling=setInterval(()=>{
                    if((document.documentElement.scrollTop||document.body.scrollTop)-document.body.scrollHeight>=-1000){
                        clearInterval(this.intervaling)
                        this.setState({
                            size:this.state.size+1
                        },()=>{
                            this.loading()
                        })
                    }
                })
            }
    }
    loading(){
        axios.get('http://www.niuduxiu.com/mobile/product/list.jhtml?pageNumber='+this.state.size+'&pageSize=10&orderType='+this.state.chooseType+'&productCategoryId=&search=')
            .then((item)=>{
                this.setState({
                    size:item.data.returnValue.pageNumber,
                    total:item.data.returnValue.tatalPage,
                    Array:this.state.Array.concat(item.data.returnValue.products)
                },()=>{
                    this.interval();
                })
            })
    }
    Choose(index){
        if(index===this.state.choose){
            return false;
        }
        clearInterval(this.intervaling)
        let state='';
        if(index===1){
            state='priceAsc'
        }else if(index===0){
            state='priceDesc'
        }else if(index===2){
            state='scoreDesc'
        }else if(index===3){
            state='salesDesc'
        }
        this.setState({
            choose:index,
            size:1,
            chooseType:state,
            Array:[]
        },()=>{
            this.loading()
        })
    }
    toDetail(item){
        console.log(item);
        this.props.history.push('/shoppingDetail/'+item.goodsId+'/'+item.id)
    }
    render() {
        let district=[{label: '价格降序', value: '价格降序'},{label: '价格升序', value: '价格升序'},{label: '评分降序', value: '评分降序'},{label: '销量降序', value: '销量降序'}]
        return (
            <div className="App" style={{marginBottom:0}}>
                <div className='headerShoppingMall'>转化</div>
                <Lunbo />
                <div className='ShoppingMall'>
                    <ul>
                        {
                            district.map((item,index)=>{
                                return(
                                    <li key={index}
                                        className={this.state.choose===index?'active':''}
                                        onClick={this.Choose.bind(this,index)}>
                                        {item.label}
                                    </li>
                                )
                            })
                        }
                    </ul>
                   <div className='ShoppingMallAll'>
                       {
                           this.state.Array.map((item,index)=>{
                               return(
                                   <div className='ShoppingMallOne' key={index}>
                                       <img src={item.image} alt=""  onClick={this.toDetail.bind(this,item)} />
                                       <div className='ShoppingMallBottom'>
                                           <p className='shengluehao title'>{item.fullName}</p>
                                           <p className='shengluehao type'>{item.productCategory.name}</p>
                                           <p className='price'>￥{item.price}</p>
                                       </div>
                                   </div>
                               )
                           })
                       }
                   </div>
                    <Dibu  size={this.state.size} total={this.state.total} />
                </div>
            </div>
        );
    }
}

export default ShoppingMall;
